<template>
	<comRoot  @execAfterToken="getHouseInfoFun">
		<template #page>
			<image v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/page-bg.png`" class="bg" />
			
			<comDetailNavigateBack />
			
			<view class="house-info-page flex relative flex-direction-column flex-justify-content-around" v-if="commonConfigs && commonConfigs.domainFrontFileLink" 
				:style="{'background-image': `url(${commonConfigs.domainFrontFileLink}/files/images/welfareHouse/rebate-detail-bg.png)`}">
				
				<view class="left-area flex">
					<view class="image-view relative flex-all-center">
						<image v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/welfareHouse/img-box-bg.png`" class="bg" />
						<image class="relative image-view-avatar" v-if="houseInfo.path" :src="houseInfo.path" mode="aspectFill" />
					</view>
		
					<view class="house-detail flex-full" v-if="houseInfo.name">
						<view class="house-name flex-align-items-center flex-justify-content-between">
							<view class="house-name-txt truncate font-hanserif-bold">{{ houseInfo.name }}</view>
							
							<view class="flex-justify-content-center relative">
								<button open-type="share" @click="setShareFun" class="button">
									<image src="/static/images/public_imgs/share-icon.png" style="width: 40rpx;height: 40rpx;" />
								</button>
							</view>
						</view>
					
						<view class="house-time">{{ houseInfo.end_time }}</view>

						<view class="house-title flex-align-items-center flex-justify-content-between">
							<view v-if="showNoticeTxtFun(houseInfo.title, 18)" 
								style="width: 416rpx;height: 34rpx;text-align: center;">
								<uni-notice-bar
									class="uni-notice-bar"
									color="#FFFFFF"
									background-color="transparent"
									:scrollable="true"
									:single="true"
									:text="showNoticeTxtFun(houseInfo.title, 18)"
									:speed="54"
								></uni-notice-bar>
							</view>
							<view class="truncate" v-else>{{ houseInfo.title }}</view>
							
							<view class="flex-align-items-center right-area-heat">
								<image style="width: 28rpx;height: 44rpx;margin: 0 10rpx 0 8rpx;"
									:src="commonConfigs.domainFrontFileLink + '/files/images/welfareHouse/icon-hot.png'" />
								<view>{{ houseInfo.heat }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 赏品预览 参与人数 中奖记录 -->
			<view class="house-list-box relative" v-if="commonConfigs && commonConfigs.domainFrontFileLink && token"  
				:style="{ 'background-image': `url(${commonConfigs.domainFrontFileLink}/files/images/welfareHouse/join-now-bg.png)` }">
				<!-- tabAreaList -->
				<view class="tabbar-box flex flex-justify-content-between relative"  v-if="token">
					<view v-for="(item, index) in tabAreaList" :key="index" class="tabbar-item relative flex-all-center" :class="tabIndex === index ? 'tabbar-item-active' : ''" @click="setTabFun(index)">
						<image v-if="commonConfigs && commonConfigs.domainFrontFileLink" 
							:src="tabIndex === index ? `${commonConfigs.domainFrontFileLink}/files/images/welfareHouse/tabbar-item-active-bg.png` : `${commonConfigs.domainFrontFileLink}/files/images/welfareHouse/tabbar-item-bg.png`" class="bg" />
						<view class="relative font-hanserif-bold">{{ item.name }}</view>
					</view>
				</view>
				
				<!-- 赏品预览 -->
				<view v-show="tabIndex === 0">
					<scroll-view scroll-y :style="{ height: 'calc(100vh - ' + commonNavHeight + ' - 200rpx - 260rpx - 80rpx)' }">
						<comHousePrizePreview :resLists="houseInfo.item_list" :num="houseInfo.item_nums" :price="houseInfo.recovery_price_balance" />
					</scroll-view>
				</view>

				<!-- 参与记录 & 中奖记录 -->
				<view class="record-box" v-show="tabIndex === 1"  v-if="token">
					<scroll-view scroll-y :style="{ height: 'calc(100vh - ' + commonNavHeight + ' - 200rpx - 380rpx)' }" @scrolltolower="scrolltolower">
						<comHouseRecord :resLists="resLists" v-if="resLists && resLists.length" />
						<comEmptyData v-else></comEmptyData>
					</scroll-view>
				</view>
				<view class="record-box" v-show="tabIndex === 2"  v-if="token">
					<scroll-view scroll-y :style="{ height: 'calc(100vh - ' + commonNavHeight + ' - 200rpx - 380rpx)' }">
						<comHouseRecord :resLists="houseInfo.item_log" v-if="houseInfo.item_log && houseInfo.item_log.length" />
						<comEmptyData v-else></comEmptyData>
					</scroll-view>
				</view>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<view class="flex-direction-column flex-end flex-align-items-center fixed font-hanserif-bold" v-else 
				:style="{ 
					width: '100%',
					height: 'calc(100vh - ' + commonNavHeight + ' - 200rpx - 380rpx)',
					color: '#FF8B1D',
					bottom: '0rpx',
				}">
				<view style="margin-bottom: 20rpx;">请点击右下角前往旺卡抽赏，参与福利屋！</view>
				<image class="relative" style="width: 304rpx;height: 352rpx;left: 120rpx;" v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/welfareHouse/join-arrow.png`" />
			</view>
			<!-- #endif -->

			<!-- 底部按钮 -->
			<view class="house-oper-btn fixed flex-justify-content-around font-hanserif-bold flex-align-items-center" v-if="token && (commonConfigs && commonConfigs.domainFrontFileLink)" :style="{ 'background-image': `url(${commonConfigs.domainFrontFileLink}/files/images/welfareHouse/join-now-bottom-bg.png)` }">

				<view class="oper-btn-box flex-justify-content-around flex-align-items-center" v-if="houseInfo.status !== 2" >
					<view class="oper-btn-time relative">
						<image v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/welfareHouse/join-detail-time-bg.png`" class="bg" />
						<view class="relative">距离开奖时间：{{ countdownTimes }}</view>
					</view>
					<template v-if="options.type != 2">
						<view class="oper-btn-item" :style="{ 'background-image': `url(${commonConfigs.domainFrontFileLink}/files/images/welfareHouse/joined-btn-bg.png)` }" v-if="houseInfo.status === 1 && (commonConfigs && commonConfigs.domainFrontFileLink)"></view>
						<view class="oper-btn-item" :style="{ 'background-image': `url(${commonConfigs.domainFrontFileLink}/files/images/welfareHouse/join-btn-bg.png)` }" @click="clickJoinHouseFun" v-else-if="(commonConfigs && commonConfigs.domainFrontFileLink)"></view>
					</template>
				</view>
				
				<!-- 活动结束 -->
				<view class="oper-btn-out" :style="{ 'background-image': `url(${commonConfigs.domainFrontFileLink}/files/images/welfareHouse/join-end-btn-bg.png)` }" v-else-if="(commonConfigs && commonConfigs.domainFrontFileLink)"></view>
				
			</view>
			
			<!-- 福利屋参与条件 -->
			<comPromptPopup v-model="isShowJoinTip" title="参与提示" :content="joinTipTxt" cancelText="关闭" confirmText="去抽赏" @setSureFun="setSureFun" />

			<!-- 密码房弹窗 -->
			<comPromptPopup v-model="isShowPWD" title="请输入密码" :content="joinTipTxt" cancelText="关闭" confirmText="确认参与" @setSureFun="setPwdFun">
				<template>
					<input
						class="input-uppop"
						type="text"
						v-model="housePwd"
						placeholder="请输入密码"
						placeholder-class="input-uppop_class"
						:maxlength="18"
						value=""
					/>
				</template>
			</comPromptPopup>

		</template>
	</comRoot>
</template>

<script>
	import { setTimeFunDown, setAsyncFunWait } from '@/setupproject/TOOLS_FUN';
	import { getWelfareHouseRowApi, getWelfareHouseJoinRoomApi, getWelfareHouseJoinLogApi } from '@/setupproject/INTERFACE.js';
	import pager from '@/inmixed/paging.mixin.js';
	import store from '@/store';
	
	export default {
		name: 'joinHousePage',
		mixins: [pager],
		data() {
			return {
				options: {},
				houseInfo: {},
				housePwd: '',
				isTimeOut: true,
				isShowJoinTip: false,
				isShowPWD: false,
				timer: null,
				countdownTimes: '',
				joinTipTxt: '',
				tabIndex: 0,
				tabAreaList: [{ name: '赏品预览' }, { name: '参与人数' }, { name: '中奖记录' }],
			};
		},
		onLoad(options) {
			// #ifdef MP-WEIXIN
			uni.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
			// #endif
			
			this.options = options;
			
			// #ifdef MP-WEIXIN
			if(!this.token && options.houseInfo) {
				this.houseInfo = JSON.parse(options.houseInfo);
			}
			// #endif
		},
		onUnload() {
			if(this.timer) {
				clearInterval(this.timer);  
				this.timer = null;  
			} 
		},
		onShareTimeline() {
			// #ifdef MP-WEIXIN
			let welfare_tag = '';
			if(this.options.id && this.userInfo.id) {
				welfare_tag = this.options.id + '_' + this.userInfo.id;
			}
			
			let houseInfo = {};
			if(this.houseInfo) {
				houseInfo = JSON.parse(JSON.stringify(this.houseInfo));
				houseInfo.item_list = [];
				houseInfo.user_list = [];
				houseInfo.item_log = [];
				houseInfo = JSON.stringify(houseInfo);
			}
			
			return {
				title: this.houseInfo.name,
				query: `id=${this.options.id}&welfare_tag=${welfare_tag}&houseInfo=${houseInfo}`,
				imageUrl: this.houseInfo.path,
			}
			// #endif
		},
		computed: {
			commonConfigs() {
				return store.getters.commonConfigs || {};
			},
			commonNavHeight() {
				return store.getters.commonNavHeight + 'px';
			},
			token() {
				return this.$store.getters.token;
			},
			userInfo() {
				return this.$store.getters.userInfo;
			},
		},
		onShareAppMessage(e) {
			if (e.from === 'menu') {
				this.$store.commit('SHARE_INFO_SET_FUN', {
					title: this.houseInfo.name,
					path: `/secondary/joinHousePage/joinHousePage?id=${this.options.id}`,
					imageUrl: `${this.commonConfigs.domainFrontFileLink}/files/images/common/new-mp-share.png`,
					content: '',
					desc: ''
				});
			}
			
			uni.showLoading({
				title: '',
				mask: false
			});

			const promise = new Promise((resolve) => {
				setTimeout(() => {
					const { shareObjData } = this.$store.getters;
					resolve(shareObjData);
					uni.hideLoading();
				}, 200)
			})

			return {
				promise
			};
		},
		methods: {
			async setJoinHouseFun() {
				await store.commit('SHOW_LOADING_SET_FUN', true);
				
				const { data, code , msg } = await getWelfareHouseJoinRoomApi({ room_id: this.options.id, password: this.housePwd });
			
				if (code === 10002) {
					this.joinTipTxt = msg;
					this.isShowJoinTip = true;
					
					await store.commit('SHOW_LOADING_SET_FUN', false);
					return;
				}
				
				if (code !== 200) {
					await store.commit('SHOW_LOADING_SET_FUN', false);
					return;
				}
				
				uni.showToast({
					title: msg,
					icon: 'success'
				});
				
				this.housePwd = '';
				this.isShowPWD = false;
				this.getHouseInfoFun();
				
				await store.commit('SHOW_LOADING_SET_FUN', false);
			},
			
			async getHouseInfoFun() {
				const { data, code } = await getWelfareHouseRowApi({ id: this.options.id });

				if (code === 10000) {
					await setAsyncFunWait(1500);
					await uni.navigateBack();
				}

				if (code !== 200) return false;
				this.houseInfo = data;
				console.log(this.houseInfo ,'this.houseInfo --------------------');
				if (data.item_log.length > 0) {
					data.item_log.forEach((item) => {
						item.create_time = item.update_time;
					});
				}

				clearInterval(this.timer);

				if (this.houseInfo.end_time && this.isTimeOut && this.houseInfo.status !== 2) {
					this.countdownTimes = setTimeFunDown(this.houseInfo.end_time).text;
					this.isTimeOut = setTimeFunDown(this.houseInfo.end_time).flag;
					
					this.timer = setInterval(async () => {
						this.countdownTimes = setTimeFunDown(this.houseInfo.end_time).text;
						this.isTimeOut = setTimeFunDown(this.houseInfo.end_time).flag;
						
						if (!this.isTimeOut) {
							clearInterval(this.timer);
							await setAsyncFunWait(300);
							await this.getHouseInfoFun();
						}
					}, 1000);
				}
			},
			

			setPwdFun() {
				if (!this.housePwd) {
					return uni.showToast({
						title: `请输入密码`,
						icon: 'error'
					});
				}else{
					this.isShowPWD = false;
					this.setJoinHouseFun();
				}
			},
			
			// 参与人数  需要固定为listsGetFun: 以配合 paging.mixin.js
			async listsGetFun() {
				if (this.tabIndex === 1) {
					const { data, code } = await getWelfareHouseJoinLogApi({ id: this.options.id, page: this.pageInfoObj.page, page_size: this.pageInfoObj.page_size });
					if (code !== 200) return;
					data.resLists = data.rows
			
					data.count = data.total;
					return data;
				}
			},
			
			setSureFun() {
				uni.redirectTo({
					url: `/pages/tabbar/tabbar?tabCurrentIndex=tabHome`
				});
			},
			
			setShareFun() {
				this.$store.commit('SHARE_INFO_SET_FUN', {
					title: '旺卡抽赏实现你心中梦想!',
					path: `/secondary/joinHousePage/joinHousePage?id=${this.options.id}`,
					imageUrl: `${this.commonConfigs.domainFrontFileLink}/files/images/common/new-mp-share.png`,
					content: '',
					desc: ''
				})
			},

			async clickJoinHouseFun() {
				// 福利屋类型：0福利房 1玩家房 2密码房
				if (this.houseInfo.tag === 2) {
					this.housePwd = '';
					this.isShowPWD = true;
				}else{
					this.setJoinHouseFun();
				}
			},
			
			setTabFun(index) {
				this.tabIndex = index;
				if (index === 1) {
					/* paging.mixin.js Methods */
					this.pagingInitFun();
					this.resListsGetFun();
				}
			},
			
			showNoticeTxtFun(name, len) {
				if (name) {
					var namelen = name.length, sum = 0; 
					for (var i = 0; i < namelen; i++) {
						// 中文: 字符编码大于255
						if (name.charCodeAt(i) > 255) {  
							sum += 2;  // 双字节, 累加2
						} else {
							sum++;  // 单字节, 累加1
						}
					}
					if (sum > len*2) {
						return name;
					}
				}
			},
		}
	};
</script>

<style lang="scss" scoped>
	.house-info-page {
		width: 710rpx;
		height: 194rpx;
		background-size: 100% 100%;
		padding: 20rpx;
		margin: 0 auto;
		
		.left-area {
			.image-view {
				width: 154rpx;
				height: 154rpx;

				.image-view-avatar {
					width: 144rpx;
					height: 144rpx;
					border-radius: 8rpx;
				}
			}

			.house-detail {
				// width: 66%;
				margin-left: 18rpx;
				// margin-top: 10rpx;
				
				.house-name {
					.house-name-txt {
						width: 90%;
						color: #FFFFFF;
						font-size: 36rpx;
						// background: linear-gradient(0deg, #FAFDC5 0%, #FFFFFF 100%);
						// -webkit-background-clip: text;
						// -webkit-text-fill-color: transparent;
					}
				}
				
				.house-time {
					color: #FFFFFF;
					font-size: 24rpx;
					margin-bottom: 24rpx;
				}
				
				.house-title {
					font-size: 26rpx;
					color: #FFFFFF;
				}
			}
		
		}
		
		.right-area-heat {
			color: #63FFF7;
			font-size: 28rpx;
		}
		
	}

	.house-list-box {
		padding-top: 28rpx;
		padding-bottom: 28rpx;
		background-size: 100% 100%;
		margin: 0 auto;
		width: 710rpx;
		top: 30rpx;
		
		.tabbar-box {
			top: -10rpx;
			width: 100%;
			font-size: 24rpx;
			color: #ffffff;
			height: 100rpx;
			// padding: 0 30rpx;

			.tabbar-item {
				// margin-right: 32rpx;
				font-size: 28rpx;
				width: 180rpx;
				height: 64rpx;
				color: #FFFFFF;
			}

			.tabbar-item-active {
				// font-size: 34rpx;
				font-weight: bold;
				color: #FFFFFF;
			}

		}
	}

	.house-oper-btn {
		width: 100%;
		height: 172rpx;
		bottom: 0;
		left: 0;
		padding: 0rpx 10rpx;
		background-size: 100% 100%;

		.oper-btn-box {
			width: 100%;

			.oper-btn-time {
				height: 44rpx;
				line-height: 44rpx;
				font-size: 28rpx;
				color: #FFFFFF;
			}

			.oper-btn-item {
				width: 243rpx;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 22rpx;
				color: #ffffff;
				margin-left: 34rpx;
				text-align: center;
				background-size: 100% 100%;
			}
		}

		.oper-btn-out {
			font-size: 36rpx;
			color: #CCC;
			width: 512rpx;
			height: 76rpx;
			line-height: 76rpx;
			text-align: center;
			background-size: 100% 100%;
		}
	}

	// 参与记录 & 中奖记录
	.record-box {
		width: 686rpx;
		border-radius: 8rpx;
		margin: 0rpx auto;
	}
	
	// 密码弹框
	.input-uppop {
		height: 80rpx;
		line-height: 80rpx;
		padding: 0 18rpx;
		margin-top: 54rpx;
		color: #111111;
		border: 2rpx solid #1987D7;
		border-radius: 10rpx;
		/deep/ .input-uppop_class {
			color: #2D3489;
			font-size: 28rpx;
		}
	}
</style>
